<template>
    <view class="page">
        <view class="msg">
            <div v-for="(item,index) in message" :key="index">{{JSON.stringify(item)}}</div>
        </view>
        <view>
            <button @click="message = []">清空屏幕消息</button>
        </view>
        <view>
            MQTT
            <button @click="mqtt('connect')">开启连接</button>
            <button @click="mqtt('subscribe')">订阅主题</button>
            <button @click="mqtt('unsubscribe')">取消订阅主题</button>
            <button @click="mqtt('send')">发送数据</button>
            <button @click="mqtt('close')">关闭连接</button>
            <button @click="mqtt('isConnected')">是否已连接</button>
        </view>
    </view>
</template>

<script>
    const _TCPSocket = uni.requireNativePlugin("zad-socket-tcp");
    const _MQTT = uni.requireNativePlugin("zad-socket-mqtt");
    export default {
        data() {
            return {
                message: [{ code: 200, data: 'Socket 插件测试' }],
            }
        },
        onLoad() {},
        methods: {
            mqtt(method, param) {
                switch (method) {
                    case "connect": //连接
                        _MQTT.event({
                            method: 'connect',
                            param: {
                                url: 'tcp://broker.emqx.io:1883',
                                username: 'emqx',
                                password: 'public',
                                clientId: 'abcd123222'
                            }
                        }, e => {
                            this.handleMessage(e)
                        })
                        break;
                    case "isConnected": //是否已连接
                        _MQTT.event({ method: 'isConnected' })
                        break;
                    case "subscribe": //订阅
                        _MQTT.event({ method: 'subscribe', param: { topic: 'mkarm/speed' } })
                        break;
                    case "unsubscribe": //取消订阅
                        _MQTT.event({ method: 'unsubscribe', param: { topic: 'mkarm/speed' } })
                        break;
                    case "send": //发送消息
                        _MQTT.event({
                            method: 'send',
                            param: { topic: 'mkarm/speed', message: '消息1' }
                        })
                        break;
                    case "close": //关闭
                        _MQTT.event({ method: 'close' })
                        break;
                }
            },
            handleMessage(e) {
                //e.code    400方法调用失败、200方法调用成功、0插件主动发送的消息、-1插件主动发送的异常消息
                //e.method  调用时传递的参数，可以根据method处理逻辑
                //e.data    返回数据体
                this.message.push(e)
                if (e.method == 'receive') {
                    //接收到服务端的消息
                    console.log(e.data)
                }
            },
        }
    }
</script>
<style scoped>
    .page {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    .msg {
        border: solid 1px #888;
        overflow: auto;
        flex: 1;
        width: 100%;
		height: 200px;
        margin-bottom: 10px;
    }
</style>
